<template>
  <div class="page-box">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>ERC20</span>
          <el-link type="primary" href="https://docs.openzeppelin.com/" target="_blank"
            >Docs</el-link
          >
        </div>
      </template>
      <div class="card-content">
        <div class="item">
          <p class="title">
            1. ERC20合约
            <el-button style="margin-left: 16px" type="primary" @click="addMetamask"
              >添加SBT到Metamask</el-button
            >
          </p>
          <f-code :code="codeContract" />
        </div>
        <div class="item">
          <p class="title">2. 合约地址</p>
          <span>Contract Address: </span>
          <el-link
            type="primary"
            :href="`https://goerli.etherscan.io/address/${codeContractAddress}`"
            target="_blank"
            >{{ codeContractAddress }}</el-link
          >
        </div>
        <div class="item">
          <p class="title">3. ERC20合约ABI</p>
          <f-code :code="codeABI" />
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { erc20_abi, erc20_address, erc20_code } from '@/hooks/erc20'
import { addWatchAsset } from '@/utils/metamask'
import { ref } from 'vue'

const codeContract = ref(erc20_code)
const codeContractAddress = ref(erc20_address)
const codeABI = ref(`${JSON.stringify(erc20_abi, null, 4)}`)

async function addMetamask() {
  addWatchAsset({
    address: erc20_address,
    symbol: 'SBT',
    decimals: 18,
    // image: 'https://nftstorage.link/ipfs/bafkreibaxqbdrr46o3txac7gyvaf7isj3t2e2ys3p4dygyqpqeuvjqjwra',
    image:
      '',
  })
}
</script>

<style scoped></style>
